<template>
  <div class="meeting-room-management">
    <h2>用户管理</h2>
    <!--查询条件-->
    <div>
      <el-form :inline="true" :model="GetUserNum" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="GetUserNum.accountNumberOrPhone" placeholder="用户账号/ID/手机号码" clearable />
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="GetUserNum.memberLevel" placeholder="会员等级" clearable>
            <el-option label="普通会员" value="普通会员" />
            <el-option label="黄金会员" value="黄金会员" />
            <el-option label="白金会员" value="白金会员" />
            <el-option label="钻石会员" value="钻石会员" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="GetUserNum.userTittle" placeholder="用户标签" clearable>
            <el-option v-for="i in GetUserTittleNum" :label="i" :value="i" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="GetUserNum.registerChannel" placeholder="注册渠道" clearable>
            <el-option label="APP" value="APP" />
            <el-option label="网站" value="网站" />
            <el-option label="小程序" value="小程序" />
            <el-option label="其他渠道" value="其他渠道" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-col :span="11">
            <el-date-picker v-model="GetUserNum.startTime" type="date" placeholder="" style="width: 100%" />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-date-picker v-model="GetUserNum.endTime" type="date" placeholder="" style="width: 100%" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="resetSubmit">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--数据展示-->
    <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column prop="accountNumber" label="ID编号" />
      <el-table-column prop="idNumber" label="用户账号" />
      <el-table-column prop="memberLevel" label="会员等级" />
      <el-table-column prop="userStatus" label="用户状态">
        <template v-slot="scope">
          <el-tag v-if="scope.row.userStatus" type="success">正常</el-tag>
          <el-tag v-if="!scope.row.userStatus" type="warning">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderRecords" label="订单记录">
        <template v-slot="scope">
          <span style="color: #569FFE;">{{ scope.row.orderRecords }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="consumptionAmount" label="消费金额">
        <template v-slot="scope">
          <span>{{ "￥" + scope.row.consumptionAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="availablePoints" label="可用积分" />
      <el-table-column>
        <template v-slot="scope">
          <el-button type="primary" @click="DetailUserInfo(scope.row),dialogVisible = true" plain>详情</el-button>
          <el-button type="primary" @click="dialogVisible = true" plain>编辑</el-button>

          <el-button type="danger" @click="DelUserButton(scope.row.userId)" plain>删除</el-button>
        </template>
      </el-table-column>


    </el-table>
    <!--底部操作-->
    <div class="footer-bar">
      <div class="batch-actions">
        <label for="select-all-footer">选择全部</label>
        <button class="secondary-button" @click="DelUserRangeButton">全部删除</button>
        <button class="secondary-button">反向选择</button>
        <button class="secondary-button">更多操作</button>
        <!--分页-->
      </div>
    </div>
  </div>
  <!--弹出层-->
  <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
    <span>
      <!--编辑数据-->
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
        <el-form-item label="用户账号" prop="name">
          <el-input v-model="ruleForm.userInfo.accountNumber" readonly />
        </el-form-item>
        <el-form-item label="手机号码" prop="name">
          <el-input v-model="ruleForm.userInfo.userTelephone" />
        </el-form-item>
        <el-form-item label="会员等级" prop="type">
          <el-checkbox-group v-model="ruleForm.userInfo.memberLevel">
            <el-checkbox value="普通会员" name="type">
              普通会员
            </el-checkbox>
            <el-checkbox value="黄金会员" name="type">
              黄金会员
            </el-checkbox>
            <el-checkbox value="白金会员" name="type">
              白金会员
            </el-checkbox>
            <el-checkbox value="钻石会员" name="type">
              钻石会员
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="性别" prop="resource">
          <el-radio-group v-model="ruleForm.userInfo.userStatus">
            <el-radio value="true">正常</el-radio>
            <el-radio value="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker v-model="ruleForm.userInfo.baseEntityUpdateTime" type="date" aria-label="Pick a date" placeholder="Pick a date"
                style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="所在城市" prop="region">
          <el-select v-model="ruleForm.userInfo.orderRecords" >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false,submitForm(ruleFormRef)">保存</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          退出
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { GetUser, GetUserTittle, DelUserInfo, DelUserRangeInfo, UpdUserInfo } from '../../api/user'; // 导入API接口
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import { useCounterStore } from '@/stores/counter';
// 页面加载时执行
onMounted(async () => {
  GetUserWay()
  GetUserTittleWay()
})
//修改数据
interface RuleForm {
  userInfo: {
    baseEntityCreateName: String
    baseEntityCreateTime: String
    baseEntityUpdateTime: String
    isDeleted: boolean
    userId: Number
    idNumber: String
    accountNumber: String
    userTelephone: String
    password: String
    memberLevel: String
    userStatus: boolean
    orderRecords: Number
    consumptionAmount: Number
    availablePoints: Number
    userTittle: String
    registerChannel: String
    operatorName: String
  }
}
// 表格数据类型
interface User {
  userId: number
  date: string
  name: string
  address: string
}
const route = useCounterStore();
//弹出层属性
const dialogVisible = ref(false)
//
const ruleFormRef = ref<FormInstance>()
//用户数据展示
const tableData = ref([{ userId: Number }])
//一键全选属性
const selectAll = ref([{}])
// 分页参数，查询参数
const GetUserNum = reactive({
  "pageIndex": 1,
  "pageSize": 20,
  "accountNumberOrPhone": "",
  "memberLevel": "",
  "userTittle": "",
  "registerChannel": "",
  "startTime": "2000-01-01T00:41:14.807Z",
  "endTime": "2099-12-31T00:41:14.807Z",
  "operatorName": route.userInfo.idNumber
})
///用户标签
const GetUserTittleNum = ref([])
// 获取用户
const GetUserWay = async () => {
  const way = await GetUser(GetUserNum)
  if (way.data.success) {
    tableData.value = way.data.data.data
  } else {
    ElMessage.error("获取用户失败")
  }
}
//查询按钮
const onSubmit = () => {
  GetUserWay()
}
//重置按钮
const resetSubmit = () => {
  GetUserNum.accountNumberOrPhone = "";
  GetUserNum.memberLevel = "";
  GetUserNum.userTittle = "";
  GetUserNum.registerChannel = "";
  GetUserNum.startTime = "2000-01-01T00:41:14.807Z";
  GetUserNum.endTime = "2099-12-31T00:41:14.807Z";
  GetUserWay()
}
//获取用户标签
const GetUserTittleWay = async () => {
  const way = await GetUserTittle()
  GetUserTittleNum.value = way.data
  //console.log(way.data);
}
// 不允许选中的行
const selectable = (row: User) => ![0].includes(row.userId)
// 选择行变化时触发
const handleSelectionChange = (val: User[]) => {
  selectAll.value = val.map(item => item.userId)
  for (let i = 0; i < selectAll.value.length; i++) {
    DelUserRangeNum.value.userIdList.push((selectAll.value[i]) as never)
  }
}
//批量删除数据
const DelUserRangeNum = ref({
  "userIdList": [],
  "operatorName": route.userInfo.idNumber
})
//批量删除数据按钮
const DelUserRangeButton = async () => {
  if (DelUserRangeNum.value.userIdList.length === 0) {
    ElMessage.error("请选择要删除的用户")
    return
  }
  ElMessageBox.confirm('确定要删除选中的用户?')
    .then(async () => {
      console.log(DelUserRangeNum.value.userIdList);
      const way = await DelUserRangeInfo(DelUserRangeNum.value)
      if (way.data.isSuc) {
        ElMessage.success("批量删除成功")
        GetUserWay()
      } else {
        ElMessage.error("批量删除用户失败")
      }

    })
    .catch(() => {
      // 用户取消删除操作
    })
}
//删除用户数据
const delUserNum = ref({
  "userId": 1111,
  "operatorName": route.userInfo.idNumber
})
//删除用户按钮
const DelUserButton = async (id: any) => {
  //删除用户
  if (id === 0) {
    ElMessage.error("请选择要删除的用户")
    return
  }
  delUserNum.value.userId = id
  const way = await DelUserInfo(delUserNum.value)
  if (way.data.isSuc) {
    ElMessage.success("删除成功")
    GetUserWay()
  } else {
    ElMessage.error("删除用户失败")
  }
}
//用户详细信息
const DetailUserInfo = (data: any) => {
  console.log(data)
  ruleForm.userInfo = data
}
//
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定要退出吗?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}




const ruleForm = reactive<RuleForm>({
  "userInfo": {
    "baseEntityCreateName": "string",
    "baseEntityCreateTime": "2025-06-02T02:05:50.052Z",
    "baseEntityUpdateTime": "2025-06-02T02:05:50.052Z",
    "isDeleted": true,
    "userId": 0,
    "idNumber": "string",//用户名【原ID编号 】
    "accountNumber": "string",//用户账号 【自动生成】
    "userTelephone": "16856009287",//用户手机号
    "password": "string",//用户密码 【MD5加密】
    "memberLevel": "string",//会员等级【普通会员、黄金会员、白金会员、钻石会员】
    "userStatus": true,//用户状态【true】正常【false】异常
    "orderRecords": 0,//订单记录
    "consumptionAmount": 0,//消费金额
    "availablePoints": 0,//可用积分
    "userTittle": "string",//用户标签【活跃用户、沉睡用户、流失用户】 
    "registerChannel": "string",//注册渠道 【APP、网站、小程序、其他渠道】,
    "operatorName": route.userInfo.idNumber
  }
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({  
})
//提交按钮
const submitForm = async (formEl: FormInstance | undefined) => {

}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

<style scoped>
.meeting-room-management {
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
  color: #333;
  background-color: #f5f7fa;
  /* 模仿背景色 */
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 20px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

h2 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s, color 0.3s;
}

.primary-button {
  background-color: #409eff;
  color: white;
}

.primary-button:hover {
  background-color: #66b1ff;
}

.secondary-button {
  background-color: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.secondary-button:hover {
  background-color: #ecf5ff;
  color: #409eff;
  border-color: #c6e2ff;
}

.danger-button {
  background-color: #f56c6c;
  color: white;
}

.danger-button:hover {
  background-color: #f78989;
}

.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 10px 0;
}

.batch-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #606266;
}

.batch-actions input[type="checkbox"] {
  margin-right: 5px;
}
</style>